<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 3. 有一个数组 var list = ["a", "b", "c", "d", "e", "f", "g"], 从数组中随机四个元素, 放到新数组中 => 拼接验证码 abcd
    //     3.1 随机的四个元素不可以重复

    var list = ["a", "b", "c", "d", "e", "f", "g"];

    // 如何从数组中随机元素?
    // 思路: 数组通过下标取值 -> 随机元素的本质 随机下标

    // 随机的验证码可能重复:
    // var arr = [];
    // for (var i = 0; i < 4; i++) {
    //     var index = Math.floor(Math.random() * list.length);
    //     var char = list[index];
    //     // console.log(char);
    //     arr.push(char);  //直接放
    // }
    // console.log(arr);

    // var str = arr.join("");
    // console.log(str);



    // 如何让随机的验证码不重复:
    // 解析:
    // 1. 之所以会重复 是因为每次放之前 没有判断新数组中有没有该元素  => 不存在=> 放 
    // 2. 存在的话 -> 如果不做任何处理 -> 随机的元素可能少于4个

    // 方法1:  如果重复再给依次机会

    var list = ["a", "b", "c", "d", "e", "f", "g"];
    var arr = [];
    var count = 4;
    for (var i = 0; i < count; i++) {
        var index = Math.floor(Math.random() * list.length);
        var char = list[index];
        // arr.includes(char) == false  不存在
        // !arr.includes(char) == true  =>  arr.includes(char) == false 
        if (!arr.includes(char)) { // 不存在才能放
            arr.push(char)
        } else {
            console.log(char + "已经存在!");
            count++;
        }
    }
    console.log(arr);

    var str = arr.join("");
    console.log(str);


    // 方法2: 每次随机完毕删除对应下标的元素
    // var list = ["a", "b", "c", "d", "e", "f", "g"];
    // var arr = [];
    // for (var i = 0; i < count; i++) {
    //     var index = Math.floor(Math.random() * list.length);
    //     var char = list.splice(index, 1)[0]; // splice()返回被删除的元素形成的新数组 => 取出被删除的元素
    //     arr.push(char)
    // }
    // console.log(arr);

    // var str = arr.join("");
    // console.log(str);


    // 方法3:  
    // 如果重复 -> 本次不算
    var list = ["a", "b", "c", "d", "e", "f", "g"];
    var arr = [];
    for (var i = 0; i < 4; i++) { // 假设i=2时重复
        var index = Math.floor(Math.random() * list.length);
        var char = list[index];
        // arr.includes(char) == false  不存在
        // !arr.includes(char) == true  =>  arr.includes(char) == false 
        if (!arr.includes(char)) { // 不存在才能放
            arr.push(char)
        } else {
            console.log(char + "已经存在!", i);
            i--; // i-- => i = 1  => 本次循环结束 i++ =>  下次还走 i=2
        }
    }
    console.log(arr);

    var str = arr.join("");
    console.log(str);



    // 
    // while (arr.length < 4) {

    // }



</script>

</html>